const CompressionWebpackPlugin = require('compression-webpack-plugin')
const TerserPlugin = require('terser-webpack-plugin')
const isProd = process.env.NODE_ENV === 'production'
const path = require('path')
const resolve = dir => path.join(__dirname, dir)
module.exports = {
  devServer: {
    port: 8080,
    proxy: {
      '/lsms/api': {
        target: 'http://39.98.124.89:9010',
        changeOrigin: true
      }
    },
    overlay: {
      warnings: false,
      errors: true
    }
  },
  publicPath: '',
  outputDir: 'dist',
  assetsDir: 'static',
  indexPath: 'index.html',
  lintOnSave: 'default',
  runtimeCompiler: isProd,
  transpileDependencies: [],
  productionSourceMap: false,
  css: {
    sourceMap: !isProd,
    loaderOptions: {
      less: {
        javascriptEnabled: true
      }
    }
  },
  configureWebpack: config => {
    if (isProd) {
      const plugins = []
      const optimization = {
        // 启用最小化压缩
        minimize: true,
        minimizer: [
          new TerserPlugin({
            // 和productionSourceMap一样
            // sourceMap: false,
            terserOptions: {
              compress: {
                // 移除所有console相关的代码，比如console.log,console.error
                drop_console: true,
                // 关闭自动断点功能，vue代码里插入debugger指令后，执行到对应位置会自动断线，此选项是移除debugger指令
                drop_debugger: true,
                // pure_funcs数组是用来配置移除指定的指令，比如console.log  alert等等
                // 移除console.log，需要配合.eslintrc.js文件里的如下设置，不然打包会出警告
                // rules: {
                //   'no-console':  'off',
                // }
                pure_funcs: ['console.log', 'console.error']
              }
            }
          })
        ]
      }
      // 将optimization的所有属性合并到config里
      Object.assign(config, {
        optimization
      })

      const productionGzipExtensions = /\.(js|css|json|txt|html|ico|svg)(\?.*)?$/i
      plugins.push(
        new CompressionWebpackPlugin({
          test: productionGzipExtensions,
          threshold: 4096
        })
      )
      config.plugins = [...config.plugins, ...plugins]
    }
    config.module.rules.push({
      test: /\.worker.js$/,
      use: {
        loader: 'worker-loader',
        options: { inline: 'fallback', filename: 'roadMerge.[hash].js' }
      }
    })
  },
  parallel: false,
  chainWebpack: config => {
    config.resolve.alias.set('@', resolve('src'))
    config.resolve.symlinks(true)
    config.module
      .rule('worker')
      .test(/\.worker\.js$/)
      .use('worker')
      .loader('worker-loader')
      .options({
        inline: 'fallback',
        filename: 'roadMerge.[hash].js'
      })
    // config.module
    //   .rule('svg')
    //   .exclude.add(resolve('src/icons')) // 考虑移动位置
    //   .end()
    // config.module
    //   .rule('icons')
    //   .text(/\.svg$/)
    //   .include.add(resolve('src/icons')) // 考虑移动位置
    //   .end()
    //   .use('svg-sprite-loader')
    //   .loader('svg-sprite-loader')
    //   .options({
    //     symbolId: 'icon-[name]'
    //   })
    //   .end()
    if (isProd) {
      config.optimization.splitChunks({
        chunks: 'all', // 将对什么类型的代码进行分割，三种值：all: 全部 ｜ async: 异步，按需加载的代码 ｜ initial: 入口代码块
        cacheGroups: {
          // 缓存组
          common: {
            name: 'chunk-common',
            chunks: 'initial',
            minChunks: 2,
            maxInitialRequests: 5,
            minSize: 0,
            priority: 1,
            reuseExistingChunk: true,
            enforce: true
          },
          vendors: {
            name: 'chunk-vendors',
            test: /[\\/]node_modules[\\/]/,
            chunks: 'initial',
            priority: 2,
            reuseExistingChunk: true,
            enforce: true
          },
          elementUI: {
            name: 'chunk-elementui',
            test: /[\\/]node_modules[\\/]element-ui[\\/]/,
            chunks: 'all',
            priority: 3,
            reuseExistingChunk: true,
            enforce: true
          },
          echarts: {
            name: 'chunk-echarts',
            test: /[\\/]node_modules[\\/](vue-)?echarts[\\/]/,
            chunks: 'all',
            priority: 4,
            reuseExistingChunk: true,
            enforce: true
          }
        }
      })
    } else {
      config.optimization.delete('splitChunks')
    }
  }
}
